<<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>1.1-1垂直菜单制作</title>
</head>
<body>
  <div class="wrap">
  	<ul>
 	  <li><a href="#">首    页</a></li>
 	  <li><a href="#">新闻快讯</a></li>
 	  <li><a href="#">产品展示</a></li>
 	  <li><a href="#">售后服务</a></li>
 	  <li><a href="#">联系我们</a></li>
  	</ul>
  </div>
  <style type="text/css">
	*{
	  margin: 0;
	  padding: 0;
	  font-size: 14px;
	}
	a{
	  text-decoration: none;
	  display: block;
	  height: 30px;
	  line-height: 30px;
	  text-indent:10px;
	  width: 100%;
	  background: #ccc;
	  border: 1px solid #999;
	}
	ul{
	  list-style: none;
	  width: 100px;
	}

	/*li{
	  height: 30px;
	  line-height: 30px;
	  /*padding-left: 10px;  导致元素宽度增加了10px*/
	 /* text-indent: 10px;  /* 使文字缩进10px，但不改变正行宽度 
	  width: 100%;
	  background: #ccc;
	  border: 1px solid #999;
	*/}
  </style>
</body>
</html>